<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式控制</title>
</head>
<body>
<div id="message" style="width: 100px;height: 100px;background-color: #00FF00">
    hello
</div>

<button id="btnHide">隐藏</button>
<button id="btnShow">显示</button>
<button id="btnToggle">切换</button>
</body>
<script>

    /***
     *  1. 事件
     *    事件名称
     *    处理方式
     *    事件绑定
     * */


    var message = document.getElementById('message');
    message.onclick = messageClick;

    /*message.onclick = function () {

    }*/
    function messageClick() {

        alert(this.innerText);
    }

    /***
     *  2. 样式
     * */
    var btnHide = document.getElementById('btnHide');
    var btnShow = document.getElementById('btnShow');
    var btnToggle = document.getElementById('btnToggle');
    btnHide.onclick = function () {
        var message = document.getElementById('message');
        message.style.display = "none";
    }
    btnShow.onclick=function () {
        var message = document.getElementById('message');
        message.style.display = "block";
    }
    btnToggle.onclick=function () {
        console.log(message.style.display);

        if(message.style.display!='none'){
            // 一个元素，如果是显示状态，那么style.display的值是不是block？
            message.style.display = "none";
        }else{
            message.style.display = "block";
        }
    }


 //  message.className ='box danger';
    message.classList.add('box');
    message.classList.add('danger');
    message.classList.remove('box');


</script>
</html>